<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>订单支付页</title>
	<link rel="stylesheet" href="/static/order/pay/css/style.css">
	<script src="/static/order/pay/js/jquery-3.1.1.min.js" charset="utf-8"></script>
</head>
<body>
<div class="One_Jdbox">
	<div class="Jdbox_head">
		<img src="/static/order/pay/img/logo1.jpg" alt=""><span class="bank">收银台</span>
		<ul>
			<li><span>[[${session.loginUser.nickname}]]</span><span>退出</span></li>
			<li><a href="http://order.gulimall.com/list.html">我的订单</a></li>
			<li>支付帮助</li>
		</ul>
	</div>
	<div class="Jdbox_BuySuc">
		<dl>
			<dt><img src="/static/order/pay/img/saoyisao.png" alt=""></dt>
			<dd>
				<span>订单提交成功，请尽快付款！订单号：[[${submitOrderResp.order.orderSn}]]</span>
				<span>应付金额<font>[[${#numbers.formatDecimal(submitOrderResp.order.payAmount,1,2)}]]</font>元</span>
			</dd>
			<dd>
				<span>推荐使用</span>
				<span>扫码支付请您在<font>24小时</font>内完成支付，否则订单会被自动取消(库存紧订单请参见详情页时限)</span>
				<span>订单详细</span>
			</dd>
		</dl>
	</div>
	<div class="Jd_Con">
		<p class="JdCon_title"><img src="/static/order/pay/img/title.png" alt=""></p>
		<div class="Jd_Fenqi">
			<ul>
				<li><img src="/static/order/pay/img/BAITIAO_2.0.png" alt="">打白条</li>
				<li>
					<span>可用额度 7275.38元</span>
					<span>白条还款日 2018-01-27</span>
					<span><font>优惠</font>随机立减(最高10元)</span>
				</li>
				<li>支付<font>28.90</font>元</li>
			</ul>
			<ol>
				<li>
					<p>不分期</p>
					<p>0服务费</p>
				</li>
				<li>
					<p>3期</p>
					<p>9.48元/期</p>
				</li>
				<li>
					<p>6期</p>
					<p>4.94元/期</p>
				</li>
				<li>
					<p>12期</p>
					<p>2.35元/期</p>
				</li>
				<li>
					<p>24期</p>
					<p>1.44元/期</p>
				</li>
			</ol>
		</div>
		<div class="Jd_main">
			<ul>
				<li>
              <span>
                <img src="/static/order/pay/img/XJKCONSUME.png" alt="">谷粒学院小金库
              </span>
					<span>未开通小金库</span>
				</li>
				<li>
              <span>
                <img src="/static/order/pay/img/CMB.png" alt="">招商银行
              </span>
					<span>信用卡(4337)</span>
					<span><font>优惠</font>单单减最高99元</span>
				</li>
				<li>
					<button>更多付款方式</button>
					<button>添加新卡/网银支付</button>
				</li>
				<li>
					<p>请输入6位数字支付密码</p>
					<input type="password"><span>忘记支付密码？</span>
				</li>
				<li>
					<button>立即支付</button>
				</li>
			</ul>
		</div>
	</div>
	<div class="Jd_footer">
		<ul>
			<li>
				<img src="/static/order/pay/img/weixin.png" alt="">
				<a th:href="'http://order.gulimall.com/weixinPayOrder?orderSn='+${submitOrderResp.order.orderSn}">微信支付</a>
			</li>
			<li>
				<img src="/static/order/pay/img/zhifubao.png" style="weight:auto;height:30px;" alt="">
				<a th:href="'http://order.gulimall.com/aliPayOrder?orderSn='+${submitOrderResp.order.orderSn}">支付宝</a>
			</li>
		</ul>
	</div>
	<div class="Jd_foots">
		<p>
			<span>Copyright @2004-2017 谷粒学院gulimall.com 版权所有</span>
			<span>
            <img src="/static/order/pay/img/foots.png" alt="">
          </span>
		</p>
	</div>
</div>
</body>
<script type="text/javascript">
	//头部订单成功 订单详细鼠标移入效果
	$(".Jdbox_BuySuc dl dd:last-child span:last-child").mouseover(function(){
		$(this).css({"cursor":"pointer","color":"#E31613"})
	}).mouseout(function(){
		$(this).css("color","#7EA4FF")
	})
	//分期付款鼠标移入hover效果
	$(".Jd_Fenqi>ol li:not(:first-child)").mouseover(function(){
		$(this).css({"cursor":"pointer","border":"1px solid #E31613"})
	}).mouseout(function(){
		$(this).css("border","1px solid #C9DFFF")
	})
	//支付方式按钮选择hover效果
	$(".Jd_main ul li:nth-child(3) button").mouseover(function(){
		$(this).css({"cursor":"pointer","color":"#E31613"})
	}).mouseout(function(){
		$(this).css("color","#67A4FF")
	})
	//忘记密码鼠标移入效果
	$(".Jd_main ul li:nth-child(4) span").mouseover(function(){
		$(this).css({"cursor":"pointer","color":"#E31613"})
	}).mouseout(function(){
		$(this).css("color","#67A4FF")
	})
	//立即支付按钮效果
	$(".Jd_main ul li:nth-child(5) button").mouseover(function(){
		$(this).css({"cursor":"pointer","background":"#FF5350"})
	}).mouseout(function(){
		$(this).css("background","#FC6E6C")
	})

	$(".Jd_footer ul li").mouseover(function(){
		$(this).css({"cursor":"pointer","color":"#E31613"})
	}).mouseout(function(){
		$(this).css("color","#5E5E5E")
	})

	$(".Jdbox_head>ul li span").mouseover(function(){
		$(this).css({"cursor":"pointer","color":"#E31613"})
	}).mouseout(function(){
		$(this).css("color","#666666")
	})
	$(".Jdbox_head>ul li:not(:first-child)").mouseover(function(){
		$(this).css({"cursor":"pointer","color":"#E31613"})
	}).mouseout(function(){
		$(this).css("color","#666666")
	})


	$(".Jd_Fenqi ul li:first-child").mouseover(function(){
		$(this).css({"cursor":"pointer","color":"#666666"})
	}).mouseout(function(){
		$(this).css({"color":"black"})
	})
</script>
</html>
